<template>
<div class="colors-cp">
    <div 
        v-for="(item,index) in filterColorList" 
        :key="index"
        @click="onCopy(item)"
        :style="{
            backgroundColor:item,
        }">
    </div>
</div>
</template>
<script>
//配色展示列表
export default {
    props:{
        colorList:{ //配色数据
            type:String,
            default:'',
        },
    },
    computed:{
        filterColorList(){
            let colorList = [];
            let _colorList = (this.colorList || '').match(/#\/?.+? /g);
            if(_colorList){
                _colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            let __colorList = (this.colorList || '').match(/rgba\(\/?.+?\)/g);
            if(__colorList){
                __colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            let ___colorList = (this.colorList || '').match(/rgb\(\/?.+?\)/g);
            if(___colorList){
                ___colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            let ____colorList = (this.colorList || '').match(/hsl\(\/?.+?\)/g);
            if(____colorList){
                ___colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            let _____colorList = (this.colorList || '').match(/hsla\(\/?.+?\)/g);
            if(_____colorList){
                ___colorList.filter(item=>{
                    colorList.push(item.replace(' ',''));
                });
            }
            return colorList;
        },
    },
    methods:{
        onCopy(text){
            this.$copyText(text).then(()=>{
                this.$notify({
                    title: '已复制！',
                    message: '希望该配色方案您能喜欢！',
                    position: 'bottom-right',
                });
            }).catch(()=>{
                return;
            });
        },
    },
}
</script>
<style lang="scss" scoped>
.colors-cp{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    >div{
        cursor: pointer;
        margin: 0 5px;
        margin-top: 10px;
        width: 15px;
        height: 15px;
        background-color: rgb(243, 231, 209);
        border-radius: 50%;
        box-sizing: border-box;
        transition: all 0.2s;
        &:hover{
            transform: scale(1.2);
        }
    }
}
</style>

